<template lang="">
	<div class="option-warp">
		<mine-header>{{ title }}</mine-header>
		<div class="content">
			<form @submit.prevent="commit" class="form-list">
				<div class="txtarea">
					<label for="options">意见反馈</label>
					<textarea
						name=""
						id=""
						placeholder="请填写您的意见和建议"
						cols="30"
						rows="10"
					></textarea>
				</div>
				<div class="form-item" style="height: 120px; margin: 10px 0px">
					<i for="pic">图片(选填，提供问题截图)</i>
					<input type="file" placeholder="请输入新密码" />
				</div>
				<div class="form-item">
					<label for="connection">联系方式</label>
					<input type="text" placeholder="请填写手机号或邮箱(选填)" />
				</div>
			</form>
			<div class="commit">
				<button @click="commitAction">提交</button>
			</div>
		</div>
	</div>
</template>
<script>
import MineHeader from '@/views/Mine/com/mine-header.vue';
export default {
	name: 'useroption',
	components: {
		[MineHeader.name]: MineHeader,
	},
	data() {
		return {
			title: '意见反馈',
		};
	},
	methods: {
		commitAction() {
			//收集数据，发送提交请求
			//弹框提示
			//跳转回我的页面
			console.log(11);
		},
	},
};
</script>
<style lang="scss" scoped>
.option-warp {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 20;
	background-color: #f4f6f9;
	.content {
		.form-list {
			width: 100%;
			.txtarea {
				height: 150px;
				padding: 0px 10px;
				background-color: #fff;
				display: flex;
				justify-content: flex-start;
				label {
					padding: 10px;
				}
				textarea {
					flex: 1;
					padding: 15px;
					border: none;
					background-color: #fff;
				}
			}
			.form-item {
				height: 45px;
				display: flex;
				flex-direction: row;
				align-items: center;
				flex-wrap: wrap;
				border-bottom: 1px solid #b3b4c7;
				border-top: 1px solid #b3b4c7;
				background-color: #fff;
				label {
					font-size: 16px;
					color: blue;
					padding: 10px;
					font-weight: 400;
					width: 40px;
					text-align: center;
				}
				input {
					flex: 1;
					font-size: 14px;
					color: #32354a;
					font-weight: 400;
					padding-right: 20px;
					height: 30px;
					border: 0;
					line-height: 100%;
					outline: medium;
				}
				i {
					width: 100%;
					color: #32354a;
					font-size: 14px;
					padding: 10px;
				}
			}
		}

		.commit {
			display: flex;
			justify-content: center;
			margin-top: 20px;
			padding: 15px;
			button {
				width: 274px;
				height: 44px;
				text-align: center;
				background-color: #4a73ff;
				color: #fff;
				border: 1px #4a73ff solid;
				border-radius: 5px;
				font-size: 16px;
			}
		}
	}
}
</style>
